/*手机商品列表页面逻辑代码
----------------------------------------------------------*/

//手机商品列表页 JSON 数据
var phoneListJson = {
    "ret": true,
    "data": {
        "swiperList": [{
            "id": "0001",
            "imgUrl": "https://oss.static.nubia.cn/blockimage/15506322613.jpg",
            "aSrc": "./phone-buy.html"
        },{
            "id": "0002",
            "imgUrl": "https://oss.static.nubia.cn/blockimage/15506322452.jpg",
            "aSrc": "./phone-buy.html"
        },{
            "id": "0003",
            "imgUrl": "https://oss.static.nubia.cn/blockimage/154744967044.jpg",
            "aSrc": "./phone-buy.html"
        }],
        "phoneList": [{
            "id": "0001",
            "kind": "红魔Mars",
            "products": [{
                "type": "红魔Mars 8GB+128GB 曜石黑",
                "price": "￥3199.00",
                "aSrc": "./phone-buy.html",
                "imgUrl": "https://oss.static.nubia.cn/active/5c37f65d4e1ae1.png"
            },{
                "type": "红魔Mars 6GB+64GB 曜石黑",
                "price": "￥2699.00",
                "aSrc": "./phone-buy.html",
                "imgUrl": "https://oss.static.nubia.cn/active/5c37f65d4e1ae1.png"
            },{  
                "type": "红魔Mars 8GB+128GB 烈焰红",
                "price": "￥3199.00",
                "aSrc": "./phone-buy.html",
                "imgUrl": "https://oss.static.nubia.cn/upload/5c161f447c1ff9.png"
            },{ 
                "type": "红魔Mars 6GB+64GB 烈焰红",
                "price": "￥2699.00",
                "aSrc": "./phone-buy.html",
                "imgUrl": "https://oss.static.nubia.cn/upload/5c161f447c1ff9.png"
            },{
                "type": "红魔Mars RNG六周年纪念版8+128GB RNG六周年纪念版",
                "price": "￥3299.00",
                "aSrc": "./phone-buy.html",
                "imgUrl": "https://oss.static.nubia.cn/upload/5c24a6255d2dd6.jpg"
            }]
        },{
            "id": "0002",
            "kind": "X",
            "products": [{
                "type": "X 6GB+64GB 深空灰",
                "price": "￥2999.00",
                "origPrice": "￥3299.00",
                "priceSave": "立省300.00元",
                "aSrc": "./phone-buy.html",
                "imgUrl": "https://oss.static.nubia.cn/pic/154097575547.png"
            },{
                "type": "X 8GB+128GB 深空灰",
                "price": "￥3399.00",
                "origPrice": "￥3699.00",
                "priceSave": "立省300.00元",
                "aSrc": "./phone-buy.html",
                "imgUrl": "https://oss.static.nubia.cn/pic/154097571431.png"
            },{
                "type": "X 8GB+256GB 黑金",
                "price": "￥3899.00",
                "origPrice": "￥4199.00",
                "priceSave": "立省300.00元",
                "aSrc": "./phone-buy.html",
                "imgUrl": "https://oss.static.nubia.cn/active/5c37ff7b69a8693.png"
            },{
                "type": "X 8GB+128GB 海光蓝",
                "price": "￥3499.00",
                "origPrice": "￥3799.00",
                "priceSave": "立省300.00元",
                "aSrc": "./phone-buy.html",
                "imgUrl": "https://oss.static.nubia.cn/active/5c37ff23186a448.png"
            },{
                "type": "X 8GB+512GB 星空典藏版（蓝金梵高版）",
                "price": "￥4999.00",
                "origPrice": "￥5299.00",
                "priceSave": "立省300.00元",
                "aSrc": "./phone-buy.html",
                "imgUrl": "https://oss.static.nubia.cn/active/5c3800478d63198.png"
            },{
                "type": "X 蓝金版8GB+256GB 蓝金版",
                "price": "￥3999.00",
                "origPrice": "￥4299.00",
                "priceSave": "立省300.00元",
                "aSrc": "./phone-buy.html",
                "imgUrl": "https://oss.static.nubia.cn/upload/5c2315536996994.jpg"
            },{
                "type": "X 6GB+64GB 海光蓝",
                "price": "￥3099.00",
                "origPrice": "￥3399.00",
                "priceSave": "立省300.00元",
                "aSrc": "./phone-buy.html",
                "imgUrl": "https://oss.static.nubia.cn/active/5c37ff23186a448.png"
            }]
        },{
            "id": "0003",
            "kind": "Z18",
            "products": [{
                "type": "Z18 6GB+64GB 极夜黑",
                "price": "￥2499.00",
                "origPrice": "￥2799.00",
                "priceSave": "立省300.00元",
                "aSrc": "./phone-buy.html",
                "imgUrl": "https://oss.static.nubia.cn/active/5c3800759b73917.png"                
            },{
                "type": "Z18 8GB+128GB 极夜黑",
                "price": "￥2699.00",
                "origPrice": "￥3299.00",
                "priceSave": "立省300.00元",
                "aSrc": "./phone-buy.html",
                "imgUrl": "https://oss.static.nubia.cn/active/5c3800759b73917.png"                
            },{
                "type": "Z18 8GB+128GB 星云红",
                "price": "￥2699.00",
                "origPrice": "￥3299.00",
                "priceSave": "立省300.00元",
                "aSrc": "./phone-buy.html",
                "imgUrl": "https://oss.static.nubia.cn/active/5c38020d4dfe014.png"                
            },{
                "type": "Z18 梵高星空典藏版 梵高星空典藏版",
                "price": "￥3599.00",
                "aSrc": "./phone-buy.html",
                "imgUrl": "https://oss.static.nubia.cn/active/5c35d5257bb5937.png"                
            }]
        },{
            "id": "0004",
            "kind": "红魔",
            "products": [{
                "type": "红魔 6GB+64GB 曜石黑",
                "price": "￥2099.00",
                "origPrice": "￥2499.00",
                "priceSave": "立省400.00元",
                "aSrc": "./phone-buy.html",
                "imgUrl": "https://oss.static.nubia.cn/pic/152593298339.png"
            },{
                "type": "红魔 8GB+128GB 曜石黑",
                "price": "￥2199.00",
                "origPrice": "￥2999.00",
                "priceSave": "立省800.00元",
                "aSrc": "./phone-buy.html",
                "imgUrl": "https://oss.static.nubia.cn/pic/152593298339.png"
            },{
                "type": "红魔 8GB+128GB 烈焰红",
                "price": "￥2199.00",
                "origPrice": "￥2999.00",
                "priceSave": "立省800.00元",
                "aSrc": "./phone-buy.html",
                "imgUrl": "https://oss.static.nubia.cn/pic/153481678448.jpg"
            },{
                "type": "红魔 6GB+64GB 烈焰红",
                "price": "￥2099.00",
                "origPrice": "￥2499.00",
                "priceSave": "立省400.00元",
                "aSrc": "./phone-buy.html",
                "imgUrl": "https://oss.static.nubia.cn/pic/153481678448.jpg"
            }]
        },{
            "id": "0005",
            "kind": "V18",
            "products": [{
                "type": "V18 4GB+64GB 星云红",
                "price": "￥899.00",
                "nonmemberPrice": "￥999.00",
                "vipPrice": "会员价",
                "aSrc": "./phone-buy.html",
                "imgUrl": "https://oss.static.nubia.cn/pic/152565836755.jpg"
            },{
                "type": "V18 4GB+64GB 曜石黑",
                "price": "￥899.00",
                "nonmemberPrice": "￥999.00",
                "vipPrice": "会员价",
                "aSrc": "./phone-buy.html",
                "imgUrl": "https://oss.static.nubia.cn/active/5c35d5258e6eb87.png"
            }]
        },{
            "id": "0006",
            "kind": "Z18mini",
            "products": [{
                "type": "Z18mini 6GB+64GB 耀钻黑",
                "price": "￥1299.00",
                "origPrice": "￥1799.00",
                "priceSave": "立省500.00元",
                "aSrc": "./phone-buy.html",
                "imgUrl": "https://oss.static.nubia.cn/active/5c3800dc5be097.png"                 
            },{
                "type": "Z18mini 6GB+64GB 青瓷蓝",
                "price": "￥1299.00",
                "origPrice": "￥1799.00",
                "priceSave": "立省500.00元",
                "aSrc": "./phone-buy.html",
                "imgUrl": "https://oss.static.nubia.cn/pic/152410788650.png"                 
            },{
                "type": "Z18mini 6GB+128GB 青瓷蓝",
                "price": "￥1599.00",
                "origPrice": "￥2099.00",
                "priceSave": "立省500.00元",
                "aSrc": "./phone-buy.html",
                "imgUrl": "https://oss.static.nubia.cn/pic/152410788650.png"                 
            },{
                "type": "Z18mini 6GB+128GB 耀钻黑",
                "price": "￥1599.00",
                "origPrice": "￥2099.00",
                "priceSave": "立省500.00元",
                "aSrc": "./phone-buy.html",
                "imgUrl": "https://oss.static.nubia.cn/active/5c3800dc5be097.png"                 
            },{
                "type": "Z18mini 6GB+64GB 星空紫",
                "price": "￥1299.00",
                "aSrc": "./phone-buy.html",
                "imgUrl": "https://oss.static.nubia.cn/active/5c371c5d9633240.png"                 
            }]
        },{
            "id": "0007",
            "kind": "Z17S",
            "products": [{
                "type": "Z17S 8GB+128GB 极光蓝",
                "price": "￥2799.00",
                "origPrice": "￥3999.00",
                "priceSave": "立省1200.00元",
                "aSrc": "./phone-buy.html",
                "imgUrl": "https://oss.static.nubia.cn/pic/150777836961.jpg"
            },{
                "type": "Z17S 6GB+64GB 黑金",
                "price": "￥1799.00",
                "origPrice": "￥2699.00",
                "priceSave": "立省900.00元",
                "aSrc": "./phone-buy.html",
                "imgUrl": "https://oss.static.nubia.cn/pic/154105606484.png"   
            }]
        },{
            "id": "0008",
            "kind": "N3",
            "products": [{
                "type": "N3 4GB+64GB 曜石黑",
                "price": "￥1799.00",
                "aSrc": "./phone-buy.html",
                "imgUrl": "https://oss.static.nubia.cn/pic/152807870788.jpg"
            }]
        },{           
            "id": "0009",
            "kind": "M3",
            "products": ""
        }]
    }
}

/*banner
---------------------------------------------------------------------*/
//选出 JSON 中的 swiperList
var phoneSwiperList = phoneListJson.data.swiperList;

//选出外层的 swiper1-wrapper
var swiper1Wrapper = document.querySelector(".swiper1-wrapper");

for (let i = 0;i < phoneSwiperList.length;i ++) {
    // console.log(phoneSwiperList[i]);
    let imgUrl = phoneSwiperList[i].imgUrl;
    let aSrc = phoneSwiperList[i].aSrc;
    swiper1Wrapper.innerHTML += "<div class='swiper-slide'>\
                                    <a href='" + aSrc + "'>\
                                        <img src='" + imgUrl + "'/>\
                                    </a>\
                                </div>"
}


/*手机商品展示列表
--------------------------------------------------------------------*/
//选出 JSON 中的 phoneList
var jsonPhoneList = phoneListJson.data.phoneList;
console.log(jsonPhoneList);

//选出产品区的第一个导航,里面所有 li 的包裹元素 ul
var contentNav01 = document.querySelector(".content-nav01");

//选出产品区的第一个导航内部第一个 li 元素(所有机型)
var allKindsLi = document.querySelector(".all-kinds");

//动态创建产品区第一个导航中的所有 li 内容(除了第一个)
for (let i = 0;i < jsonPhoneList.length;i ++) {
    var phoneKind = jsonPhoneList[i].kind;
    // console.log(phoneKind);
    contentNav01.innerHTML += '<li><a href="javascript:">' + phoneKind + '</a></li>'
}


//选出“手机图片列表展示区”的 ul
var phoneListContentWrapper = document.querySelector(".phone-list-content-wrapper");

//将所有内容动态渲染到页面上
function allPhoneShow(params) {
    for (let i = 0;i < jsonPhoneList.length;i ++) {
        var phoneProducts = jsonPhoneList[i].products;

        createPhoneList(phoneProducts);
    }    
}
allPhoneShow();

function createPhoneList(phoneProducts) {
    
    for (let props in phoneProducts) {

        var productsType = phoneProducts[props].type;
        var productsPrice = phoneProducts[props].price;
        var productsASrc = phoneProducts[props].aSrc;
        var productsImgUrl = phoneProducts[props].imgUrl;
        var productsOrigPrice = phoneProducts[props].origPrice;
        var productsPriceSave = phoneProducts[props].priceSave;
        var productsNonmemberPrice = phoneProducts[props].nonmemberPrice;
        var productsVipPrice = phoneProducts[props].vipPrice;

        //增加内容
        if (productsPriceSave) {

            //如果有这一项,证明有"立省xxx.xx元"这个内容,没有则为undefined,不会执行
            phoneListContentWrapper.innerHTML += `<li>
                                                    <a href="` + productsASrc + `">
                                                        <img src="` + productsImgUrl + `"/>
                                                        <p class="phone-list-desc">` + productsType + `</p>
                                                        <p class="phone-list-price">
                                                            <span>` + productsPrice + `</span>
                                                            <span class="orig-price">` + productsOrigPrice + `</span>
                                                            <span class="price-save">` + productsPriceSave + `</span>
                                                        </p>
                                                    </a>
                                                </li>`;
        } else if (productsVipPrice) {

            //如果有这一项,证明有"会员价"这个内容,没有则为undefined,不会执行
            phoneListContentWrapper.innerHTML += `<li>
                                                    <a href="` + productsASrc + `">
                                                        <img src="` + productsImgUrl + `"/>
                                                        <p class="phone-list-desc">` + productsType + `</p>
                                                        <p class="phone-list-price">
                                                            <span>` + productsPrice + `</span>
                                                            <span class="nonmember-price">` + productsNonmemberPrice + `</span>
                                                            <span class="vip-price">` + productsVipPrice + `</span>
                                                        </p>
                                                    </a>
                                                </li>`;
        } else {

            //如果上面两项都没有,则证明是最普通的,执行这段代码
            //基础内容
            phoneListContentWrapper.innerHTML += `<li>
                                                    <a href="` + productsASrc + `">
                                                        <img src="` + productsImgUrl + `"/>
                                                        <p class="phone-list-desc">` + productsType + `</p>
                                                        <p class="phone-list-price">
                                                            <span>` + productsPrice + `</span>
                                                        </p>
                                                    </a>
                                                </li>`;
        }
    }
}


//获取所有产品区的一级导航 a
var aContentNav01A = contentNav01.getElementsByTagName("a");



//为所有 li 添加点击事件
for (let i = 0;i < aContentNav01A.length;i ++) {
    aContentNav01A[i].index = i;
    aContentNav01A[i].addEventListener('click', function (params) {

        //添加/移除颜色
        for (let i = 0;i < aContentNav01A.length;i ++) {
            aContentNav01A[i].style.color = "#999";
        }
        this.style.color = "#e8340e";

        if (this.index == 0) {

            //如果当前点击的是第一个导航项 li 的话
            //清空所有手机列表项
            phoneListContentWrapper.innerHTML  = "";

            //创建所有手机列表
            allPhoneShow();
        } else {

            //获取当前点击的索引对应的数据项,减 1 是因为导航第一项不是对应的
            var curPhoneItem = jsonPhoneList[this.index - 1];

            //先清除产品展示区所有的 li
            phoneListContentWrapper.innerHTML  = "";

            //根据当前点击的索引,创建对应的 li
            createPhoneList(curPhoneItem.products);
        }


    }, false);
}

var aContentNav02A = document.querySelectorAll(".content-nav02 a");

for (let i = 0;i < aContentNav02A.length;i ++) {
    aContentNav02A[i].onclick = function (params) {
        //添加/移除颜色
        for (let i = 0;i < aContentNav02A.length;i ++) {
            aContentNav02A[i].style.color = "#999";
        }
        this.style.color = "#e8340e";
    }
}